<template>
	<view class="topBox">
		<!-- 页面导航栏 -->
		<u-navbar :title="pageTitle" :border-bottom="false" title-size="28" title-color="#333"></u-navbar>

		<!-- 搜索框 -->
		<view class="searchBox">
			<searchBar v-model="searchValue" @search="search" :placeholder="placeholder" :needShadow="false" class="searchBar" />
		</view>
	</view>

	<view class="allocationDeviceList-container">
		<!-- 设备列表盒子 -->
		<view class="deviceList-box">
			<!-- <z-paging ref="paging" :fixed="false" v-model="AllocationDeviceList" @query="queryList">
				<template #loadingMoreNoMore>
					<view style="text-align: center; color: #999; padding-bottom: 24rpx">没有更多了</view>
				</template>

				<template #empty></template> -->

			<view v-for="(item, index) in AllocationDeviceList" :key="index" :class="{ 'AllocationDeviceList-item': true }">
				<view @click="openDetail(item)" class="infoBox">
					<view class="brief_info">
						<view @click.stop="chooseDevice(item)" class="radio-box">
							<!-- 柜机的选择按钮 -->
							<view v-if="deviceType == 'device'">
								<image
									v-if="currentChooseDevice.find((device) => device.deviceId == item.deviceId)"
									class="radio checked"
									src="@/static/deviceAllocation/checked.png"
								/>
								<image v-else class="radio noCheck" src="@/static/deviceAllocation/noCheck.png" />
							</view>
							<!-- 充电宝的选择按钮 -->
							<view v-if="deviceType == 'powerBank'">
								<image
									v-if="currentChooseDevice.find((powerBank) => powerBank.singleId == item.singleId)"
									class="radio checked"
									src="@/static/deviceAllocation/checked.png"
								/>
								<image v-else class="radio noCheck" src="@/static/deviceAllocation/noCheck.png" />
							</view>
							<view class="label">{{ deviceType == 'device' ? '机柜SN' : '充电宝SN' }}</view>
						</view>
						<text class="value">{{ item.deviceId ? item.deviceId : item.singleId ? item.singleId : '' }}</text>
					</view>
					<view v-if="deviceType == 'device' && item.showDetail" class="detail_info">
						<view class="detailTitle">机柜内含充电宝编号</view>
						<view class="powerBankList">
							<view v-for="(singleIdItem, singleIdIndex) in item.singleIds" :key="singleIdIndex" class="powerBankItem">
								{{ singleIdItem }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- </z-paging> -->
		</view>
	</view>

	<!-- 底部提交按钮 -->
	<view class="footer">
		<view @click="allCheck" class="allCheck">
			<image v-if="allChecked" class="radio checked" src="@/static/deviceAllocation/checked.png" />
			<image v-else class="radio noCheck" src="@/static/deviceAllocation/noCheck.png" />
			<span>全选</span>
		</view>
		<view class="hasChoose">
			<span class="text">已选</span>
			<span class="num">{{ currentChooseDevice.length }}</span>
			<span class="text">个内容</span>
		</view>
		<view @click="submit" class="button">确认</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue';
import { getDeviceAllocationList } from '@/api/deviceAllocation.js';
import { onLoad } from '@dcloudio/uni-app';
import searchBar from '@/subPages/components/cds-searchBar/index.vue';

onLoad((options) => {
	console.log(options);

	deviceType.value = options.deviceType;

	options.deviceType && options.deviceType == 'device' ? (pageTitle.value = '机柜下拨选择') : (pageTitle.value = '充电宝下拨选择');
	options.deviceType && options.deviceType == 'device' ? (placeholder.value = '搜索设备编号') : (placeholder.value = '搜索充电宝编号');

	getDeviceAllocationListFun();
});

const deviceType = ref('');

// 页面标题
const pageTitle = ref('');

// 搜索框placeholder
const placeholder = ref('');

// 选择的设备列表
const currentChooseDevice = ref([]);
const chooseDevice = (item) => {
	if (deviceType.value == 'device') {
		const hasDevice = currentChooseDevice.value.find((i) => i.deviceId == item.deviceId);
		if (hasDevice) {
			currentChooseDevice.value = currentChooseDevice.value.filter((i) => i.deviceId !== item.deviceId);
		} else {
			currentChooseDevice.value.push(item);
		}
	} else if (deviceType.value == 'powerBank') {
		const hasPowerBank = currentChooseDevice.value.find((i) => i.singleId == item.singleId);
		if (hasPowerBank) {
			currentChooseDevice.value = currentChooseDevice.value.filter((i) => i.singleId !== item.singleId);
		} else {
			currentChooseDevice.value.push(item);
		}
	}

	console.log(currentChooseDevice.value);
};

// 搜索框内容
const searchValue = ref('');
const search = (e) => {
	searchValue.value = e;
	getDeviceAllocationListFun();
};

// 获取下拨设备列表
const getDeviceAllocationListFun = async () => {
	let res = await getDeviceAllocationList({
		deviceId: searchValue.value,
		deviceType: deviceType.value == 'device' ? 0 : 1
	});

	if (res.code == 200) {
		if (deviceType.value == 'device') {
			// 对柜机数据进行格式化处理
			res.data.forEach((item) => {
				AllocationDeviceList.value.push({
					singleIds: item?.singleIds ? item?.singleIds : '',
					deviceId: item?.deviceId ? item?.deviceId : '',
					showDetail: false
				});
			});
		} else if (deviceType.value == 'powerBank') {
			// 对充电宝数据进行格式化处理
			res.data[0]?.singleIds.forEach((item) => {
				AllocationDeviceList.value.push({
					singleId: item,
					showDetail: false
				});
			});
		}
	}
};

// 查询设备列表
const AllocationDeviceList = ref([]);
const paging = ref(null);
const queryList = (pageNo, pageSize) => {
	console.log(pageNo, pageSize);
	// getDeviceAllocationListFun();
	// paging.value.complete([1, 2, 3, 4]);
};

// 打开设备详情box
const openDetail = (item) => {
	AllocationDeviceList.value.forEach((i) => {
		if (i.deviceId != item.deviceId) {
			i.showDetail = false;
		}
	});

	item.showDetail = !item.showDetail;
};

// 全选设备
const allChecked = ref(false);
const allCheck = () => {
	if (allChecked.value) {
		currentChooseDevice.value = [];
		allChecked.value = !allChecked.value;
		return;
	}

	currentChooseDevice.value = AllocationDeviceList.value;
	allChecked.value = !allChecked.value;
};

watch(
	currentChooseDevice,
	(val) => {
		if (val.length == AllocationDeviceList.value.length) {
			allChecked.value = true;
		} else {
			allChecked.value = false;
		}
	},
	{ deep: true }
);

// 提交选择
const submit = () => {
  if (!currentChooseDevice.value.length) {
    deviceType == 'device' ? showToast('请选择柜机') : showToast('请选择充电宝');
    return;
  }

  uni.$emit('chooseDevice', currentChooseDevice.value);

  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.topBox {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 99;

	.searchBox {
		padding: 24rpx;
		background-color: #f9f9f9;
	}
}

.allocationDeviceList-container {
	min-height: calc(100vh - 188rpx);
	padding: 0 24rpx 24rpx;
	background-color: #f9f9f9;

	.deviceList-box {
		// height: calc(100vh - 188rpx - 88rpx - 48rpx - 190rpx);
		// padding-top: 24rpx;
		padding-bottom: 190rpx;

		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		.AllocationDeviceList-item {
			margin-bottom: 12px;

			.infoBox {
				border-radius: 12px;
				padding: 16px 12px;
				background-color: #fff;

				.brief_info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border: 1px solid #fff;
					margin-bottom: 12px;

					&:last-child {
						margin-bottom: 0;
					}
					
					.radio-box {
						display: flex;
						align-items: center;
					}

					.radio {
						position: relative;
						top: 6rpx;
						width: 16px;
						height: 16px;
						margin-right: 10px;
					}
					
					.label {
						font-family: PingFang SC;
						font-size: 14px;
						font-weight: 500;
						line-height: 22.4px;
						color: #999;
					}

					.value {
						font-family: PingFang SC;
						font-size: 14px;
						font-weight: 400;
						line-height: 19.6px;
						color: #333;
					}
				}
			}

			.detail_info {
				padding-top: 12px;
				border-top: 1px solid #e9e9e9;

				.detailTitle {
					color: #333;
					font-size: 12px;
					line-height: 16.8px;
					margin-bottom: 12px;
				}

				.powerBankList {
					display: grid;
					grid-template-columns: repeat(2, 1fr);

					.powerBankItem {
						color: #333;
						margin-top: 12px;
						font-size: 12px;

						&:nth-child(1) {
							margin-top: 0;
						}

						&:nth-child(2) {
							margin-top: 0;
						}

						&:nth-child(2n) {
							padding-left: 12px;
							border-left: 1px solid #e9e9e9;
						}
					}
				}
			}
		}
	}
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	width: 100%;
	height: 190rpx;
	padding: 24rpx 24rpx 0 32rpx;
	background-color: #fff;

	.allCheck {
		display: flex;
		flex-wrap: nowrap;
		color: #333;
		font-size: 24rpx;
		height: 98rpx;
		margin-right: 78rpx;
		align-items: center;

		.radio {
			width: 28rpx;
			height: 28rpx;
			margin-right: 20rpx;
		}

		span {
			white-space: nowrap;
		}
	}

	.hasChoose {
		font-size: 24rpx;
		height: 98rpx;
		line-height: 98rpx;
		white-space: nowrap;

		.text {
			color: #333;
			white-space: nowrap;
		}

		.num {
			color: #00c582;
			white-space: nowrap;
		}
	}

	.button {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		color: #fff;
		width: 360rpx;
		height: 98rpx;
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 44rpx;
		border-radius: 96rpx;
		background-color: #00c582;
		white-space: nowrap;
	}
}
</style>
